今天來說明 ui-router 提供的事件

在各種事件中插入監聽點，可以在轉換 state 中完成一些需求。
例如說使用者在登入完後，不能在回到登入頁的需求(包括按了上一頁)。
或者在切換 state 的過程中，出現 loading icon。

在些都可以透過是事件點插入監聽 event 解決。

$stateChangeError

• 記錄當 state 切換過程中發生的錯誤。
  注意，因為在 state resolve function 發生的錯誤，不會像平常一樣從 AngularJS exceptionHandler 丟出。
  一定要在 $staeChangeError 中檢查是否有錯誤發生。

我的做法是直接在 app.run ＋$rootScope 去監聽此事件
(app.run 是可以設定該 module 配置的地方)

app.run(function ($rootScope){
  $rootScope.$on('$stateChangeError',
    function(evt, toState, toParams, fromState, fromParams, error) {
   // 確保 state error 有丟在 console 上面
    console.log('$stateChangeError', error);
  });
});

$stateChangeStart

• 發生在 state 轉換的一開始

$stateChangeSuccess

• 發生在 state 轉換的結束，在進入 controller 前

$stateNotFound

• 發生在找不到 state 的時候。
  注意：只會在使用 transitionTo 跟 go method 轉換 state 的時候才會被呼叫。
  當使用 <a href=“#/notFoundState"></a> 並不會照成 $stateNotFound 被觸發。
  ($state.go 是 $state.transitionTo 的 syntax sugar)

畫面的事件 (view)

$viewContentLoading

• 發生在畫面（DOM）開始 render 前。（由 $rootScope $broadcasts event）

$viewContentLoaded

• 發生在畫面（DOM）結束 render。(由此 state 的 scope $emit event)

state
onEnter

• 進入 state 時呼叫的 method。因為在 resolve function 後呼叫，可取得 resolve function 的資料.
  onExist
• 離開 state 時呼叫的 method。

官網事件列表

在 初談 ui-router 文章中， 我說明 resolve function 會在 state render 畫面跟進入 controller 前呼叫完畢。
為了驗證發生順序，我做了一個簡單的範例並且讓 $rootScope 監聽目前 ui-router 提供的事件。

監聽範例：http://plnkr.co/edit/kB2zcqVtaYUycFJjeA7D?p=preview

結論是，
**進入 state **所會呼叫的順序是：
$stateChangeStart -> state resolve function -> (url change) -> $viewContentLoading -> state onEnter function -> $stateChangeSuccess -> controller -> $viewContentLoaded

離開 state:
$stateChangeStart -> new state 的 $viewContentLoading -> state onExist function -> $stateChangeSuccess -> new state 的 $viewContentLoaded

錯誤發生時：
$stateChangeStart -> state resolve function -> $stateChangeError -> (stay on current state)

p.s. ui-router 版本是 0.2.11